import React from 'react'
import { useAppDispatch, useAppSelector } from '../../store/hooks'
import { Stepper } from 'react-vant'
import {  addCarItemCount, subCarItemCount} from '../../store/car/carSlice'
const Index: React.FC = () => {
	const car = useAppSelector(state => state.car.car);
	const  dispatch = useAppDispatch()
	return (
		<div>
			{
				car.map(v => {
					return <dl key={v.id}>
					<dt>
						<img src={v.url} alt="" />
					</dt>
					<dd>
						<h3>{v.title}</h3>
						<p><b>{v.price}</b></p>
						<div>
							<Stepper value={v.count} 
								onPlus={ () => dispatch(addCarItemCount(v)) }
								onMinus={ () => dispatch(subCarItemCount(v)) }
							></Stepper>
						</div>
					</dd>
				</dl>
				})
			}
		</div>
	)
}


export default Index